<section class="content-header">
    <h1>
        {{title}}
        <!-- <small>Control panel</small> -->
    </h1>
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-3 col-md-push-9">
            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">查询区域</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="form-group">
                        <label>区域</label>
                        <dx-select-box #subArea style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="subAreaItems" displayExpr="subArea"
                            [(selectedItem)]="subAareSelected" [value]="subAreaItems[0]" [searchEnabled]="true" (onValueChanged)="onSubAreaSelectedChange($event,1)">
                        </dx-select-box>
                    </div>
                    <div class="form-group">
                        <label>设备</label>
                        <dx-drop-down-box #dddb style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [(value)]="equipmentSelected"
                            displayExpr="equipment" placeholder="请选择工位" [showClearButton]="true" [dataSource]="equipemntItems">
                            <dxo-drop-down-options [width]="510" [height]="340"></dxo-drop-down-options>
                            <div *dxTemplate="let data of 'content'">
                                <button type="button" (click)="clearEquipmentSelected()" class="btn btn-default btn-sm" title="重置">重置</button>&nbsp;&nbsp;&nbsp;
                                <button type="button" (click)="equipmentSelectedOk()" class="btn btn-info btn-sm" title="确定">确定</button>
                                <dx-data-grid #ddg [dataSource]="equipemntItems" [hoverStateEnabled]="true" [paging]="{ enabled: true, pageSize: 1000 }"
                                    [filterRow]="{ visible: true }" [(selectedRowKeys)]="equipmentSelected" [scrolling]="{ mode: 'infinite' }"
                                    [height]="265" [showColumnLines]="true" [showRowLines]="true" [showBorders]="true" [rowAlternationEnabled]="true">
                                    <dxo-selection [selectAllMode]="allPages" [showCheckBoxesMode]="always" mode="multiple"></dxo-selection>
                                    <dxi-column dataField="equipmentType" caption="设备类型" [width]="100">
                                    </dxi-column>
                                    <dxi-column dataField="supplier" caption="供应商" [width]="100">
                                    </dxi-column>
                                    <dxi-column dataField="stationCode" caption="工位" [width]="100">
                                    </dxi-column>
                                    <dxi-column dataField="equipment" caption="设备" [width]="100">
                                    </dxi-column>
                                </dx-data-grid>
                            </div>
                        </dx-drop-down-box>
                    </div>
                    <div class="form-group">
                        <label>班次</label>
                        <dx-select-box #shift style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="shiftItems" displayExpr="shiftName"
                            [(selectedItem)]="shiftSelected" [value]="shiftItems[0]" [searchEnabled]="true">
                        </dx-select-box>
                    </div>
                </div>
                <div class="box-footer">
                    <button type="button" class="btn btn-primary" (click)="getReportData()"> 查 询 </button>
                </div>
            </div>
        </div>
        <div class="col-md-9 col-md-pull-3">

            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">{{title}}</h3>
                    <div class="box-tools pull-right">
                        <button type="button" (click)="updateDetail()" class="btn btn-info btn-sm" data-toggle="tooltip" title="更新此模版">
                            <i class="fa fa-save"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <dx-data-grid #dataGrid [dataSource]="items" [showColumnLines]="true" [showRowLines]="true" [showBorders]="true" [rowAlternationEnabled]="true">
                        <dxo-paging [pageSize]="12"></dxo-paging>
                        <dxo-editing mode="cell" [allowUpdating]="true">
                        </dxo-editing>
                        <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 100]" [showInfo]="true">
                        </dxo-pager>
                        <dxi-column [allowEditing]="false" dataField="subArea" caption="区域">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="equipment" caption="设备">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="ct" caption="CT" [width]="120">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="minValue" caption="最小值">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="maxValue" caption="最大值">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="isShow" caption="是否显示">
                        </dxi-column>
                    </dx-data-grid>
                </div>
            </div>

            <div class="box box-default">
                <div class="box-header with-border">
                    <h3 class="box-title">CT过滤时间段及上下限目标值</h3>
                    <div class="box-tools pull-right">
                        <button type="button" (click)="updateTimeRange()" class="btn btn-info btn-sm" data-toggle="tooltip" title="更新此模版">
                            <i class="fa fa-save"></i>
                        </button>
                        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#template">
                            添加
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <dx-data-grid #dataGrid [dataSource]="timeItems" [showColumnLines]="true" [showRowLines]="true" [showBorders]="true" [rowAlternationEnabled]="true">
                        <dxo-paging [pageSize]="12"></dxo-paging>
                        <dxo-editing mode="cell" [allowUpdating]="true">
                        </dxo-editing>
                        <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 100]" [showInfo]="true">
                        </dxo-pager>
                        <dxi-column [allowEditing]="false" caption="查看" [width]="60" [allowSorting]="false" cellTemplate="cellTemplate">

                        </dxi-column>
                        <div *dxTemplate="let data of 'cellTemplate'">
                            <button type="button" class="btn-group" (click)="delTime(data.data)">
                                删除
                            </button>
                        </div>
                        <dxi-column [allowEditing]="false" dataField="iid" caption="ID">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="subArea" caption="区域">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="startTime" caption="开始时间">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="endTime" caption="结束时间">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="sxTarget" caption="上限目标">
                        </dxi-column>
                        <dxi-column [allowEditing]="true" dataField="xxTarget" caption="下限目标">
                        </dxi-column>

                    </dx-data-grid>
                </div>
            </div>

        </div>
    </div>

    <div class="modal fade" id="template" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">添加过滤时间段及上下限目标值</h4>
                </div>
                <div class="modal-body">
                    <dx-select-box #subArea1 style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="subAreaItems1" displayExpr="subArea"
                        [(selectedItem)]="subAareSelected1" [value]="subAreaItems1[0]" [searchEnabled]="true">
                    </dx-select-box>
                    <input id="dateTimeRange" type="text" class="form-control" [(ngModel)]="timeRange" name="startTimeRange" placeholder="请输入过滤开始时间">
                </div>
                <div class="modal-body">
                    <input id="sx" type="text" class="form-control" [(ngModel)]="sxTarget" name="sxTarget" placeholder="上限目标值">
                </div>
                <div class="modal-body">
                    <input id="xx" type="text" class="form-control" [(ngModel)]="xxTarget" name="xxTarget" placeholder="下限目标值">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" (click)="saveTimeRange()">保存</button>
                    <button type="button" class="btn btn-default pull-right" data-dismiss="modal">关闭</button>
                </div>
            </div>

        </div>
    </div>
    <!--dialog end-->
</section>